<template>
	<view>
		<!-- form 表单 -->
		<view class="su-form" @change="change_">
			<!-- 不可编写 -->
			<view class="uni-list su-list">
				<view class="uni-list-cell su-cell">
					<pform type="label" title="申请状态" bind-value="编辑中" :bind-value.sync="fromData.state" disabled show-disicon />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="label" title="申请人" :bind-value.sync="fromData.name" disabled show-disicon />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="label" title="所属部门" :bind-value.sync="fromData.department" disabled show-disicon />
				</view>
			</view>
			<!-- 可填写 -->
			<view class="uni-list su-list">
				<view class="uni-list-cell su-cell">
					<pform type="select" title="请假类型" :bind-value.sync="fromData.leave_type" :select-data="selectData"
						field="name" placeholder="请选择" />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="text" title="联系方式" :bind-value.sync="fromData.tel" placeholder="输入联系方式" />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="datetime" title="开始时间" :bind-value.sync="fromData.sraDate" placeholder="选择开始时间" is-must />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="datetime" title="结束时间" :bind-value.sync="fromData.endDate" placeholder="选择结束时间" is-must />
				</view>
				<view class="uni-list-cell su-cell">
					<pform type="number" title="请假天数" :bind-value.sync="fromData.day" placeholder="输入请假天数" is-must />
				</view>
			</view>
			<!-- 请假原因 -->
			<view class="uni-list su-list">
				<view class="uni-list-cell su-cell">
					<pform type="textarea" :bind-value.sync="fromData.why" placeholder="输入请假原因" area-height="150rpx" is-must />
				</view>
			</view>
			<!-- 附件 -->
			<view class="uni-list su-list">
				<view class="uni-list-cell su-cell">
					<attachment ref="attfile" access="edit" att-id="fileUrl" att-path="OA/附件/yyyy/MM/dd" />
				</view>
			</view>
		</view>
		<view class="su-bottom-box">
			<view class="left">
				<view class="btn btn1" @click="save_">保存</view>
			</view>
			<view class="right">
				<view class="btn btn2" @click="init">提交</view>
			</view>
		</view>
		<!-- 消息提醒组件 -->
		<message ref="message" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromData: {
					state: "",
					name: "",
					department: "",
					leave_type: "",
					tel: "",
					sraDate: "",
					endDate: "",
					day: "",
					why: ""
				},
				selectData: [{
					name: "事假",
					code: "name1"
				}, {
					name: "病假",
					code: "name2"
				}, {
					name: "调休",
					code: "name3"
				}],
			}
		},
		onLoad(option){
			if(option.item != undefined){
				let options = JSON.parse(option.item);
				this.fromData = options
			}else{
				this.init()
			}
		},
		mounted(){
			
		},
		methods: {
			save_() {
				console.log(this.fromData)
				if(!this.fromData.sraDate ){
					uni.core.message("开始时间不能为空","error")
					return
				}
				if(!this.fromData.endDate){
					uni.core.message("结束时间不能为空","error")
					return
				}
				if(!this.fromData.day){
					uni.core.message("请假天数不能为空","error")
					return
				}
				if(!this.fromData.why){
					uni.core.message("请假原因不能为空","error")
					return
				}
				localStorage.setItem("datainfo",JSON.stringify(this.fromData))
				uni.core.message("保存成功")
			},
			change_(e){
				console.log(e)
			},
			init(){
				let datainfo = JSON.parse(localStorage.getItem("datainfo"))
				if(datainfo){
					this.fromData = datainfo
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $default-back;
	}

	.su-form {
		padding-bottom: 120upx;
	}

	.su-list {
		background-color: #fff !important;
		margin-top: 20upx;
	}

	.right-font {
		color: #ccc;
		font-size: 30upx;
	}

	.su-bottom-box {
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fbfbfb;
		display: flex;
		align-items: center;

		.left {
			flex: 1;
			display: flex;
			justify-content: center;

			.btn1 {
				background-color: #fff;
				border: 2upx solid #e3e3e3;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}

		.right {
			flex: 1;
			display: flex;
			justify-content: center;

			.btn2 {
				background-color: #33a0d6;
				color: #fff;

				&:active {
					background-color: #399BD0;
				}
			}
		}
	}

	.btn {
		width: 300upx;
		height: 80upx;
		border-radius: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
